import overviewNode1 from '@/assets/images/bpm/segment/overview_node1.png';
import overviewNode2 from '@/assets/images/bpm/segment/overview_node2.png';
export default function (G6: any, type: string) {
	/**
	 * 网端总览节点
	 */
	G6.registerNode(
		type,
		{
			options: {
				iconStyle: {
					width: 335,
					height: 230,
				},
				style: {
					//节点填充色
					fill: '#9EC9FF',
					//节点的描边颜色
					//stroke: '#5B8FF9',
					//鼠标在该节点上时的鼠标样式，CSS 的 cursor 选项都支持
					cursor: 'default',
				},
				stateStyles: {
					selected: {
						fill: '#9EC9FF',
					},
					hover: {
						cursor: 'move',
					},
				},
			},

			/**
			 * 绘制节点，包含文本
			 * @param  {Object} cfg 节点的配置项
			 * @param  {G.Group} group 节点的容器
			 * @return {G.Shape} 返回一个绘制的图形作为 keyShape，通过 node.get('keyShape') 可以获取。
			 * 关于 keyShape 可参考文档 核心概念-节点/边/Combo-图形 Shape 与 keyShape
			 */
			draw: function drawShape(cfg: any, group: any) {
				const fill = cfg.style.fill,
					iconWidth = this.options.iconStyle.width,
					iconHeight = this.options.iconStyle.height;
				let textColor = '#2beded';
				//更改背景
				let thisIcon = overviewNode1;

				if (cfg.status === 2) {
					textColor = '#cadc37';
				} else if (cfg.status === 3) {
					textColor = '#ff9a0c';
					thisIcon = overviewNode2;
				}
				// 底部填充
				const rect = group.addShape('rect', {
					attrs: {
						x: 12,
						y: 5,
						width: iconWidth * 0.92,
						height: iconHeight * 0.9,
						radius: 25,
						//节点的描边颜色
						//stroke,
						//填充色，有了这个填充色才能在点击节点空白的地方也能触发到事件，或者设置图形的draggable为true
						fill: fill,
						//描边宽度
						lineWidth: 0,
						//设置填充的 alpha 或透明值
						fillOpacity: 0.2,
					},
					name: 'background-color-shape',
				});
				// 添加底图
				group.addShape('image', {
					attrs: {
						x: 0,
						y: 0,
						width: iconWidth,
						height: iconHeight,
						fill: fill,
						img: thisIcon,
					},
					name: 'background-image-shape',
					draggable: true,
				});

				// 添加指标名称文本
				group.addShape('text', {
					attrs: {
						text: cfg.indicatorText,
						x: 20,
						y: 125,
						fill: '#ffffff',
						fontSize: 14,
						textAlign: 'left',
						textBaseline: 'middle',
						lineHeight: 18,
					},
					name: 'indicator-name-shape',
					draggable: true,
				});

				// 添加端名称
				group.addShape('text', {
					attrs: {
						text: cfg.segmentName,
						x: iconWidth * 0.1,
						y: 30,
						fill: '#ffffff',
						fontSize: 16,
						textAlign: 'left',
						textBaseline: 'middle',
						lineHeight: 18,
					},
					name: 'node-name-shape',
					draggable: true,
				});

				if (cfg.status === 3) {
					textColor = '#E2334F';
				}

				group.addShape('text', {
					attrs: {
						text: '.',
						x: iconWidth * 0.06,
						y: 16,
						width: 8,
						height: 8,
						fill: textColor,
						fontSize: 60,
						textAlign: 'left',
						textBaseline: 'middle',
						lineHeight: 18,
					},
					name: 'text-name-shape1',
					draggable: true,
				});

				// 添加指标值文本
				group.addShape('text', {
					attrs: {
						text: cfg.indicatorValText,
						x: 150,
						y: 125,
						fill: textColor,
						fontSize: 14,
						textAlign: 'left',
						textBaseline: 'middle',
						lineHeight: 18,
					},
					name: 'indicator-value-shape',
					draggable: true,
				});

				return rect;
			},
			/**
			 * 获取锚点（相关边的连入点）
			 * @param  {Object} cfg 节点的配置项
			 * @return {Array|null} 锚点（相关边的连入点）的数组,如果为 null，则没有控制点
			 */
			getAnchorPoints() {
				return [
					[0, 0.25],
					[0, 0.75],
					[1, 0.25],
					[1, 0.75],
				];
			},
			/**
			 * 更新节点，包含文本
			 * @override
			 * @param  {Object} cfg 节点的配置项
			 * @param  {item} item 节点
			 */
			update(cfg: any, item: any) {
				const group = item.getContainer();
				const children = group.get('children');
			},
			/**
			 * 响应节点的状态变化。
			 * 在需要使用动画来响应状态变化时需要被复写，其他样式的响应参见下文提及的 [配置状态样式] 文档
			 * @param  {String} name 状态名称
			 * @param  {Object} value 状态值
			 * @param  {Item} item 节点
			 */
			setState(name: any, value: any, item: any) {
				const group = item.getContainer();
				if (name === 'selected' || name === 'active' || name === 'hover') {
					if (!group.get('children')) return;
					const rect = group.getChildByIndex(0);
					if (value) {
						rect.attr('fill', this.options.stateStyles.selected.fill);
					} else {
						rect.attr('fill', '#FFFFFF00');
					}
				} else if (name === 'hover1') {
					const rect = group.getChildByIndex(0);
					const text = group.getChildByIndex(1);
					if (value) {
						rect.attr('cursor', this.options.stateStyles.hover.cursor);
						if (text) text.attr('cursor', this.options.stateStyles.hover.cursor);
					} else {
						rect.attr('cursor', this.options.style.cursor);
						if (text) text.attr('cursor', this.options.style.cursor);
					}
				}
			},
		},
		'single-node'
	);
}
